<template>
<div style="padding-bottom:56px">
<!--  -->
  <div style="text-align: center;line-height: 48px;background: red;color: white">
    嘿嘿嘿音乐
  </div>
<!-- 轮播图 -->
  <mu-carousel hide-controls hide-indicators>
    <mu-carousel-item v-for="(item,index) in banner" :key="index">
      <img :src="item.pic">
    </mu-carousel-item>
  </mu-carousel>
<!-- 导航栏 -->
  <div class="navtbar">
    <div class="navtber-item" v-for="(item,index) in navList" :key="index" v-if="index<4">
      <div><img :src="item.iconUrl" alt=""></div>
      <div>{{item.name}}</div>
    </div>
  </div>

  <mu-container>
    <mu-row>
      <mu-col>
        <mu-paper :z-depth="2">
          <mu-list v-for="(item,index) in bannerList" :key="item.id">
            <mu-list-item>
              <mu-list-item-action  @click="getID(item,index)" >
                <mu-avatar>
                  <img :src="item.picUrl">
                </mu-avatar>
              </mu-list-item-action>
              <mu-list-item-content>
                <mu-list-item-title>{{item.name}}</mu-list-item-title>
              </mu-list-item-content>
              <mu-list-item-action>
                <span @click="setext(item,index)" ref="index">{{index==Index?'暂停':'播放'}}</span>
              </mu-list-item-action>
            </mu-list-item>
          </mu-list>
        </mu-paper>
      </mu-col>
    </mu-row>
  </mu-container>

<!--小播放器 -->
  <mu-container style="position: fixed;bottom:0;">
    <mu-row>
      <mu-col>
        <mu-paper :z-depth="2">
          <mu-list>
            <mu-list-item>
              <mu-list-item-action >
                <mu-avatar @click="getmuisc">
                  <img :src="muiscobj.picUrl">
                </mu-avatar>
              </mu-list-item-action>
              <mu-list-item-content>
                <mu-list-item-title>{{muiscobj.name}}</mu-list-item-title>
              </mu-list-item-content>
              <mu-list-item-action >
             <div style="display: flex;justify-content: space-evenly;">
               <span @click="minplay">{{this.flag?'暂停':"播放"}}</span>
               <span style="margin:0 10px" @click="NextSong">下一首</span>
               <span>列表</span>
             </div>
              </mu-list-item-action>
            </mu-list-item>
          </mu-list>
        </mu-paper>
      </mu-col>
    </mu-row>
  </mu-container>
</div>
</template>

<script>
import item from "../components/item";
import Http from '../api/http'
export default {
  name: "test",
  components:{
    item
  },
  data(){
    return{
      banner:[],//轮播图列表
      navList:[],//菜单
      bool:true,
      item:'',//音乐对象
      idx:0,//音乐索引号
    }
  },
  created() {
    //音乐列表
    Http.get('/personalized/newsong').then(res=>{
      this.$store.commit('setbannerList',res.data.result)
    });
    Http.get('/homepage/block/page').then(res=>{
          this.banner=res.data.data.blocks[0].extInfo.banners
    })
    Http.get('/homepage/dragon/ball').then(res=>{
      this.navList=res.data.data
    })
  },
  methods:{
    //小播放器点击头像进入大播放器页面
    getmuisc(){
      // this.setmuisc(this.item,this.idx)
    },
    //小播放器点击下一首功能
    NextSong(){
      this.$store.commit('setindex',1)
      this.$store.commit('setflag',true);
      for(var i=0;i<this.$refs.index.length;i++){
        this.$refs.index[i].innerHTML='播放';
      }
      this.$refs.index[this.Index].innerHTML='暂停';
    },
    //小播放器播放和暂停功能
    minplay(){
      if(this.Index!==null){
        this.$store.commit('setflag',!this.flag);
        if(this.flag){
          this.audio.play();
          this.$refs.index[this.Index].innerHTML='暂停'
        }else {
          this.audio.pause();
          this.$refs.index[this.Index].innerHTML='播放'
        }
      }
    },
    //切换音乐
    setext(item,index){
      var id=item.id;
      this.$store.commit('setmuiscobj',item)
      if(this.bool){
        this.$store.commit('setId',id)
        this.$store.commit('setmuiscID',index)
        this.$store.commit('setflag',this.bool);
      }else {
        //关闭音乐
        this.$store.commit('setflag',this.bool);
      }
      if(this.flag){//播放音乐
        for(var i=0;i<this.$refs.index.length;i++){
          this.$refs.index[i].innerHTML='播放';
        }
        this.$refs.index[index].innerHTML='暂停';
        this.bool=false;
        this.audio.play();
      }else {
        this.$refs.index[index].innerHTML='播放';
        this.bool=true;
        this.audio.pause();
      }

      if(index!==this.Index){
        this.$store.commit('setId',id)
        this.$store.commit('setmuiscID',index)
        this.$store.commit('setflag',true);
        for(var i=0;i<this.$refs.index.length;i++){
          this.$refs.index[i].innerHTML='播放';
        }
        this.$refs.index[index].innerHTML='暂停';
      }

    },
    //跳转到音乐播放界面
    getID(item,index){
      var id=item.id
      this.$store.commit('setmuiscobj',item)
      this.$router.push({
        path:'/cart',
        query: {
          id,index
        }
      })
    }
  },
  computed:{
    bannerList(){
          return this.$store.getters.getbannerList;
    },
    Id(){
      return this.$store.getters.getid
    },
    flag(){
      return this.$store.getters.getflag
    },
    Index(){
      return this.$store.getters.getindex
    },
    audio(){
      return this.$store.getters.getaudio
    },
    muiscobj(){
      return this.$store.getters.getmuiscobj
    }
  },
}
</script>

<style scoped lang="less">
.navtbar{display: flex;justify-content: space-around;text-align: center;font-size:14px;color: white}
.navtber-item{display: flex;flex-direction: column;justify-content:start;background:red;img{width: 100%}}
.mu-carousel{
  height: 161px;
  img{width: 100%}
}
.minplay{
display: flex;justify-content: space-between;
  box-sizing: border-box;
  text-align: center;
}
.musicbtn{display:flex;justify-content: space-around;
  background: red;height: 48px;text-align: center;line-height: 48px;position:fixed;bottom: 0;width: 100%}
</style>